<template>
  <div class="mainor">
    <div
      class="main_spac1"
      style="padding-bottom: 5px"
      @click="mainor_co = false"
    >
      <el-form
        :inline="true"
        :rules="rules"
        :model="monitorForm"
        class="demo-form-inline marginTop0"
        ref="userListFrom"
        label-width="90px"
      >
        <div class="main_spac1 padding0" style="padding-bottom: 5px">
          <div class="main_white padding10">
            <div class="main_crumbs boxdq">
              <div class="main_crumbs_l">
                <a href="javascript:;" @click="$router.back(-1)">
                  <i class="el-icon-arrow-down"></i>返回
                </a>
                <em>|</em>
                <span>{{ editPage ? '编辑报价' : '添加报价' }}</span>
              </div>
              <div class="main_crumbs_r" v-if="!editPage">
                <el-button @click.stop="mainor_co = true">复制报价单</el-button>
              </div>
            </div>
            <div class="marginTop15">
              <el-form-item
                label="周期："
                prop="form.createTime"
                :rules="rules.createTime"
              >
                <el-date-picker
                  v-model="monitorForm.form.createTime"
                  type="daterange"
                  class="time220"
                  :editable="false"
                  unlink-panels
                  ref="company"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd"
                  :clearable="false"
                  :picker-options="pickerOptions"
                  @change="datepicker"
                  :disabled="editPage"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="用户：" prop="form.uids" :rules="rules.uids">
                <el-select
                  v-model="monitorForm.form.uids"
                  multiple
                  collapse-tags
                  filterable
                  ref="select"
                  default-first-option
                  class="main_crumbs_us"
                  placeholder="用户"
                  @focus="focusSelect"
                >
                  <el-option
                    v-for="item in userList"
                    :key="item.id"
                    :label="item.nickname"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="备注：" prop="form.remark">
                <el-input
                  v-model.trim="monitorForm.form.remark"
                  placeholder="备注"
                  clearable
                  class="wid240"
                ></el-input>
              </el-form-item>
            </div>
          </div>
        </div>
        <div class="main_white padding10 mg-t-14 marginBottom10">
          <div @click="mainor_co = false">
            <div class="main_white mg-t-6">
              <div class="mainor_sp boxha">
                <ul class="box">
                  <li class="box">
                    <span> <em>*</em>商品名称： </span>
                    <el-autocomplete
                      v-model="formsp.value"
                      :trigger-on-focus="false"
                      @clear="$refs.searchSelect.$children[0].blur()"
                      ref="searchSelect"
                      class="wid220 main_comm"
                      :fetch-suggestions="
                        (queryString, cb) => {
                          querySearchAsync(queryString, cb);
                        }
                      "
                      placeholder="请输入内容"
                      clearable
                      :highlight-first-item="true"
                      value-key="name"
                      @select="
                        item => {
                          handleSelect(item);
                        }
                      "
                    >
                      <template slot-scope="{ item }">
                        <div class="main_name">
                          <span>
                            {{ item.goods.name }}【{{ item.spu_name.title }}】
                          </span>
                          <span class="code">{{ item.goods_spu_code }}</span>
                        </div>
                      </template>
                    </el-autocomplete>
                  </li>
                  <!-- <li class="box">
                    <span>规格：</span>
                    <el-select
                      v-model="formsp.girard"
                      ref="focusw1"
                      placeholder="规格"
                      class="wid140"
                      :automatic-dropdown="true"
                      @keyup.enter.native="automatic"
                      v-if="show"
                    >
                      <el-option
                        v-for="item in formsp.name.spu"
                        :key="item.id"
                        :label="item.spu_name.title"
                        :value="item.id"
                      ></el-option>
                    </el-select>
                  </li> -->
                  <li class="box">
                    <span> <em>*</em>价格： </span>
                    <el-input
                      v-model.trim="formsp.price"
                      ref="focusw2"
                      placeholder="价格"
                      clearable
                      class="wid240"
                      @keyup.enter.native="mainor_sp"
                    ></el-input>
                  </li>
                </ul>
                <div class="marginBottom10 mg-l-30">
                  <el-button type="primary" class="mg-r-6" @click="mainor_qr"
                    >确认(回车)</el-button
                  >
                  <el-button
                    class="reset"
                    type="primary"
                    @click="reset"
                    >重置</el-button
                  >
                </div>
                <div class="bulk_box" v-if="!editPage">
                  <el-button @click="bulkadd">批量添加</el-button>
                </div>
              </div>
              <div class="main_table marginTop0" style="min-height: 370px">
                <el-table
                  class="mg-t-6"
                  ref="multipleTable"
                  :data="monitorForm.list"
                  element-loading-text="加载中"
                  fit
                  border
                  highlight-current-row
                >
                  <el-table-column label="序号" width="80">
                    <template slot-scope="scope">{{
                      scope.$index + 1
                    }}</template>
                  </el-table-column>
                  <el-table-column label="名称" prop="name" />
                  <el-table-column
                    label="图片"
                    prop="url"
                    class-name="main_hei"
                  >
                    <template slot-scope="scope">
                      <div class="demo-image__error mainor_im">
                        <el-image fit="fill" :src="scope.row.url">
                          <div slot="error" class="image-slot">
                            <img :src="puzzleImg" />
                          </div>
                        </el-image>
                      </div>
                    </template>
                  </el-table-column>
                  <!-- <el-table-column
                    label="分类"
                    prop="category_id"
                    width="150"
                  /> -->
                  <el-table-column label="单位" prop="unit_name" />

                  <el-table-column label="近一次采购价" prop="purchase_price">
                    <template slot-scope="scope">
                      <span
                        :style="{
                          color:
                            parseFloat(scope.row.purchase_price) >
                            parseFloat(scope.row.market_price)
                              ? 'red'
                              : ''
                        }"
                      >
                        {{ scope.row.purchase_price }}
                      </span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="市场价"
                    prop="market_price"
                    class-name="main_hei"
                  />
                  <el-table-column
                    label="报价"
                    prop="price"
                    class-name="main_hei "
                    width="240"
                  >
                    <template slot-scope="scope">
                      <el-form-item
                        :prop="'list.' + scope.$index + '.price'"
                        :rules="rules.price"
                        label-width="10px"
                        label=" "
                        class="table_input"
                      >
                        <el-input
                          v-model.trim="scope.row.price"
                          :ref="'price' + scope.row.goods_spu_id"
                          placeholder="报价"
                          class="wid140"
                        ></el-input>
                      </el-form-item>
                      <!-- <el-link
                        type="danger"
                        @click="scdelete(scope.$index)"
                        class="paddingTop20"
                        >删除</el-link
                      > -->
                    </template>
                  </el-table-column>
                  <el-table-column
                    label=""
                    prop="price"
                    fixed="right"
                    class-name="main_hei"
                    width="80"
                  >
                    <template slot-scope="scope">
                      <el-link type="danger" @click="scdelete(scope.$index)"
                        >删除</el-link
                      >
                    </template>
                  </el-table-column>
                </el-table>
              </div>

              <div class="newConBox_p200 paddingBottom10" id="newConBox">
                <div class="newConBox_h32">
                  <div
                    :class="[
                      'mainor_pr boxdq newConBox ',
                      { on: searchBarFixed }
                    ]"
                  >
                    <div class="mainor_prl">
                      <el-button
                        type="primary"
                        @click="preservation"
                        v-repeatClick
                        >保存</el-button
                      >
                      <el-button @click="$router.back(-1)">取消</el-button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-form>
    </div>

    <!-- 复制订单 -->
    <div :class="[{ on: mainor_co }, ' mainor_co']">
      <div class="mainor_cob">
        <div class="mainor_cob_c" @click="mainor_co = false">
          <i class="el-icon-close"></i>
        </div>
        <div class="mainor_cob_s">
          <el-input
            placeholder="单号"
            v-model="input"
            class="input-with-select main_search"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="mainor_cob_s"
            ></el-button>
          </el-input>
          <!-- <p>只展示符合条件的前10个单号</p> -->
        </div>
        <div class="main_table table_container">
          <div class="main_table_p">
            <el-table
              ref="multipleTable"
              :data="list_co"
              element-loading-text="加载中"
              height="96%"
              fit
              highlight-current-row
            >
              <el-table-column label="序号" width="60">
                <template slot-scope="scope">{{ scope.$index + 1 }}</template>
              </el-table-column>
              <el-table-column label="单号" prop="order_sn" width="170" />
              <el-table-column label="创建时间" prop="userNickname" width="100">
                <template slot-scope="scope">{{
                  parseTime(scope.row.created_at, "{y}-{m}-{d}")
                }}</template>
              </el-table-column>
              <el-table-column
                label="操作"
                align="center"
                width="100"
                class-name="main_hei"
              >
                <template slot-scope="scope">
                  <el-button
                    type="primary"
                    @click="copy(scope.row.id)"
                    v-repeatClick
                    >复制</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <!-- 添加商品 -->
    <el-dialog
      title="批量添加商品"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      @close="close"
      :visible.sync="shield"
      class="main_dialog dialog1300"
      style="min-height: 540px"
    >
      <div class="mainor_form mg-t-0">
        <el-form
          :inline="true"
          :model="form_sh"
          class="demo-form-inline"
          ref="userListFrom1"
          label-width="10px"
        >
          <el-form-item label prop="category_id" class="wid180">
            <el-cascader
              v-model="form_sh.category_id"
              :options="options"
              :props="defaultProps"
              placeholder="分类"
            ></el-cascader>
          </el-form-item>
          <el-form-item label=" " prop="name">
            <el-input
              v-model.trim="form_sh.name"
              placeholder="名称"
              clearable
              class="wid180"
            ></el-input>
          </el-form-item>
          <MainFormBtn @reset="dialogReset" @getSearchFor="search_sh" :loading="listLoading" :showBtn="false">
          </MainFormBtn>
        </el-form>
      </div>
      <div class="main_table">
        <el-table
          ref="multipleTable1"
          class="mg-t-12"
          v-loading="listLoading"
          :data="goods_data"
          element-loading-text="加载中"
          fit
          border
          highlight-current-row
          max-height="520"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" />
          <el-table-column
            label="名称"
            prop=""
            :show-overflow-tooltip="true"
            class-name="main_hei"
          >
            <template slot-scope="scope">
              {{ scope.row.name }}
            </template>
          </el-table-column>
          <el-table-column
            label="单位"
            prop="unit_name"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              {{ scope.row.spu_name ? scope.row.spu_name.title : "" }}
            </template>
          </el-table-column>
          <el-table-column
            label="近一次采购价"
            prop="purchase_price"
            class-name="main_hei"
          />
          <el-table-column
            label="市场价"
            prop="market_price"
            class-name="main_hei"
          />
          <el-table-column label="报价" prop="" class-name="main_hei">
            <template slot-scope="scope">
              <el-input
                v-model.trim="scope.row.price"
                placeholder="报价"
                class="wid140"
              ></el-input>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="main_page boxdq">
        <!-- 分页 -->
        <div class="main_page_r">
          <MainPagination
            :current-page="current_sh.page"
            :page-sizes="[10, 30, 50, 100]"
            :page-size="limit_sh"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalCount_sh"
            background
            @size-change="changeLimit"
            @current-change="changePage"
          />
        </div>
        <div class="dialog-footer">
          <el-button @click="(shield = false), close()">取 消</el-button>
          <el-button type="primary" @click="bulkconfirm" v-repeatClick
            >确 定</el-button
          >
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
const shuju = {
  list: {
    name: "",
    url: "",
    goods_id: "",
    goods_spu_id: "",
    category_id: "",
    unit: "",
    unit_name: "",
    purchase_price: "",
    market_price: "",
    price: "",
    show: false
  },
  formsp: {
    name: [],
    girard: null,
    price: "",
    value: ""
  }
};

import { mapGetters } from "vuex";
import {
  cycle_add,
  cycle_members,
  cycle_info,
  cycle_copyList,
  cycle_getGoodsSpu
} from "@/api/user/userQuotation";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
import rules from "@/rules/user/userQuotation";
import { puzzleImg, goods_getGoodsSpu } from "@/api/currency";
import { parseTime } from "@/utils/index";
import dateOption from "@/options/dateOption";
import { recursion, category } from "@/utils/index";

export default {
  computed: {
    ...mapGetters(["avatar"])
  },
  components: {},
  data() {
    return {
      // 时间
      editPage: false,
      parseTime,
      // 验证
      rules,
      // 列表数据
      monitorForm: {
        form: {
          createTime: [],
          uids: [],
          start_time: "",
          end_time: "",
          remark: ""
        },
        list: []
      },
      pickerOptions: dateOption,
      puzzleImg,
      // 用户
      userList: [],
      // 商品搜索
      formsp: {
        name: [],
        girard: null,
        price: "",
        value: ""
      },
      show: true,
      // 复制订单
      mainor_co: false,
      input: "",
      list_co: [],
      // id
      id: parseInt(this.$route.params.id),
      // 监听滚动
      searchBarFixed: false,
      isEdit: false,

      // 添加商品弹窗
      shield: false,
      form_sh: {
        pid: "",
        category_id: [],
        name: ""
      },
      listLoading: false,
      list_sh: {
        list: {
          data: []
        }
      },
      goods_data: [],
      current_sh: {
        page: 1,
        per_page: 10
      },
      limit_sh: 10,
      totalCount_sh: 1,
      selectArr_sh: [],

      // 分类
      options: [],
      defaultProps: {
        children: "selfNext",
        label: "title",
        value: "id",
        checkStrictly: true
      }
    };
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll);
  },
  created() {
    this.editPage = this.$route.query.isEdit ? JSON.parse(this.$route.query.isEdit) : false
    this.cycle_copyList();
    this.cycle_getGoodsSpu();
    this.$nextTick(() => {
      this.$route.meta.bread =  this.editPage ? '周期报价,编辑报价' : '周期报价,添加报价'
    })
    if (this.id) {
      this.cycle_info(this.id);
    }
  },
  beforeRouteLeave(to, from, next) {
    if (this.isEdit) {
      setTimeout(() => {
        this.$confirm(
          "您已经有数据操作，离开页面系统不会保存您的操作，确定离开吗？",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }
        )
          .then(() => {
            // 正常跳转
            next();
          })
          .catch(() => {
            next(false);
          });
      }, 200);
    } else {
      next();
    }
  },
  methods: {
    dialogReset() {
      this.$refs['userListFrom1'].resetFields()
      this.cycle_getGoodsSpu();
    },
    // 监听滚动
    handleScroll() {
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      scrollTop + document.documentElement.clientHeight >
      document.getElementById("newConBox").offsetTop + 300
        ? (this.searchBarFixed = false)
        : (this.searchBarFixed = true);
    },
    // 监听周期
    datepicker(val, index) {
      this.isEdit = true;
      this.monitorForm.form.start_time = val[0];
      this.monitorForm.form.end_time = val[1];
      this.monitorForm.form.uids = [];
      this.cycle_members(val[0], val[1]);
    },
    cycle_members(start_time, end_time) {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(
              Object.assign(apiUrl().name, {
                start_time: start_time,
                end_time: end_time
              })
            ) + apiUrl().appsecret
          )
        },
        apiUrl().name,
        { start_time: start_time, end_time: end_time }
      );
      cycle_members(data).then(res => {
        if (res.errcode == 0) {
          this.userList = res.data.list;
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    // 监听用户
    focusSelect() {
      if (this.monitorForm.form.createTime.length == 0) {
        setTimeout(() => {
          this.$refs.select.blur();
          this.$refs.company.focus();
        }, 100);
      }
    },
    // 商品搜索
    querySearchAsync(queryString, cb) {
      if (this.monitorForm.form.createTime.length == 0) {
        setTimeout(() => {
          this.$refs.company.focus();
        }, 100);
        cb([]);
        return;
      }
      if (this.monitorForm.form.uids.length == 0) {
        setTimeout(() => {
          this.$refs.select.focus();
        }, 100);
        cb([]);
        return;
      }
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(
              Object.assign(apiUrl().name, { name: queryString.trim() })
            ) + apiUrl().appsecret
          )
        },
        apiUrl().name,
        { name: queryString.trim() },
        {is_excl_dele:true}
      );
      goods_getGoodsSpu(data).then(res => {
        if (res.errcode == 0) {
          res.data.goods.map(e => {
            e.name = e.goods.name + "【" + e.spu_name.title + "】";
          });
          var results = res.data.goods;
          if (this.$refs.searchSelect) {
            this.$refs.searchSelect.activated = true;
          }
          cb(results);
        } else {
          this.$message.error(res.errmsg);
          cb([]);
        }
      });
    },
    // 商品选择
    handleSelect(item) {
      this.formsp.name = item;
      this.formsp.girard = item.id;
      setTimeout(() => {
        this.$refs.focusw2.focus();
      }, 100);
    },
    // 监听商品选择规格
    automatic(e) {
      var keyCode = window.event ? e.keyCode : e.which;
      if (keyCode == 13) {
        this.$refs.focusw1.blur();
        setTimeout(() => {
          this.$refs.focusw2.focus();
        }, 100);
      }
    },
    // 商品选择确认(回车)
    mainor_sp(e) {
      var keyCode = window.event ? e.keyCode : e.which;
      if (keyCode == 13) {
        this.mainor_qr();
      }
    },
    // 点击添加
    mainor_qr() {
      let formsp = JSON.parse(JSON.stringify(this.formsp));
      if (!formsp.name.name) {
        this.$message.error("请填写商品名称");
        this.$refs.searchSelect.focus();
        return;
      } else if (formsp.price == "") {
        this.$message.error("请填写价格");
        this.$refs.focusw2.focus();
        return;
      } else {
        let monitorForm_list = JSON.parse(
          JSON.stringify(this.monitorForm.list)
        );
        let ind = 0;
        if (monitorForm_list.length != 0) {
          monitorForm_list.map((e, index) => {
            if (e.goods_spu_id == formsp.girard) {
              ind = e.goods_spu_id;
              return;
            }
          });
          if (ind == 0) {
            this.handle(formsp);
          } else {
            setTimeout(() => {
              this.$refs["price" + ind].focus();
              this.reset();
              ind = 0;
            }, 100);
          }
        } else {
          this.handle(formsp);
        }
      }
    },
    handle(formsp) {
      let list = JSON.parse(JSON.stringify(shuju.list));
      list.name = formsp.name.name;
      formsp.name.goods.images.map(e => {
        if (e.main == 1) {
          list.url = this.avatar.domain + e.path;
        }
      });

      list.goods_id = formsp.name.goods_id;
      list.goods_spu_id = formsp.name.id;
      // list.category_id = `${formsp.name.category_p.title}|${formsp.name.category.title}`;
      list.category_id = "";
      list.unit_name = formsp.name.spu_unit.title;
      list.unit = formsp.name.unit;
      list.purchase_price = formsp.name.purchase_price;
      list.market_price = formsp.name.market_price;
      list.price = formsp.price;
      this.monitorForm.list.push(list);
      this.reset();
      setTimeout(() => {
        this.$refs.searchSelect.focus();
      }, 100);
    },
    reset() {
      this.formsp = JSON.parse(JSON.stringify(shuju.formsp));
      this.show = false;
      this.$nextTick(() => {
        this.show = true;
      });
    },
    // 复制订单-搜索
    mainor_cob_s() {
      this.cycle_copyList();
    },
    // 复制订单-复制
    copy(id) {
      this.mainor_co = false;
      this.cycle_info(id);
    },
    // 删除
    scdelete(index, type) {
      this.monitorForm.list.splice(index, 1);
    },
    // 保存
    preservation(type) {
      this.isEdit = false;
      this.$refs["userListFrom"].validate(valid => {
        if (valid) {
          if (this.monitorForm.list.length == 0) {
            this.$message.error("请至少添加一个商品");
            return;
          }
          let { createTime, ...form } = JSON.parse(
            JSON.stringify(this.monitorForm.form)
          );
          form.uids = form.uids.join(",");
          let sz = JSON.parse(JSON.stringify(this.monitorForm.list));
          let list = sz.map(e => {
            let { url, name, category_id, unit_name, show, ...sz } = e;
            return { ...sz };
          });

          let data = Object.assign(
            {
              sign: Md5(
                objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
              )
            },
            apiUrl().name,
            form,
            { list: JSON.stringify(list) }
          );
          cycle_add(data).then(res => {
            if (res.errcode == 0) {
              this.$message({
                message: "添加成功",
                type: "success"
              });
              this.$router.go(-1);
            } else {
              this.$message.error(res.errmsg);
            }
          });
        }
      });
    },
    // 复制订单
    cycle_copyList() {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name, { order_sn: this.input })) +
              apiUrl().appsecret
          )
        },
        apiUrl().name,
        { order_sn: this.input }
      );
      cycle_copyList(data).then(res => {
        if (res.errcode == 0) {
          this.list_co = res.data.list;
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    // 基本信息
    cycle_info(id) {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name, { id: id })) +
              apiUrl().appsecret
          )
        },
        apiUrl().name,
        { id: id }
      );
      cycle_info(data).then(res => {
        if (res.errcode == 0) {
          this.standard(res.data);
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    standard(data) {
      let arry = [];
      this.monitorForm.form.createTime = [
        parseTime(data.info.start_time, "{y}-{m}-{d}"),
        parseTime(data.info.end_time, "{y}-{m}-{d}")
      ];
      this.cycle_members(
        parseTime(data.info.start_time, "{y}-{m}-{d}"),
        parseTime(data.info.end_time, "{y}-{m}-{d}")
      );
      if(this.editPage) {
        this.monitorForm.form.uids = data.info.uids
          .split(",")
          .map((e) => parseInt(e));
      }
      this.monitorForm.form.start_time = parseTime(
        data.info.start_time,
        "{y}-{m}-{d}"
      );
      this.monitorForm.form.end_time = parseTime(
        data.info.end_time,
        "{y}-{m}-{d}"
      );
      this.monitorForm.form.remark = data.info.remark;
      data.info.lists.map(e => {
        let url = "";
        e.goods.images.map(p => {
          if (p.main == 1) {
            url = p.path;
          }
        });
        arry.push({
          name: e.goods.name,
          url: this.avatar.domain + url,
          goods_id: e.goods_id,
          goods_spu_id: e.goods_spu_id,
          // category_id: `${e.goods.category_p.title}|${e.goods.category.title}`,
          category_id: "",
          unit: e.unit,
          unit_name: e.spu.spu_name.title,
          purchase_price: e.purchase_price,
          market_price: e.market_price,
          price: e.price,
          show: true
        });
      });
      this.monitorForm.list = arry;
    },
    // 弹窗数据
    list_sh_form() {
      let form = JSON.parse(JSON.stringify(this.form_sh));
      form.pid = form.category_id[0] ? form.category_id[0] : "";
      form.category_id = category(form.category_id);
      return form;
    },
    cycle_getGoodsSpu() {
      this.listLoading = true;
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          )
        },
        apiUrl().name,
        this.current_sh,
        this.list_sh_form()
      );
      return new Promise(resolve => {
        cycle_getGoodsSpu(data).then(res => {
          if (res.errcode == 0) {
            this.options = recursion(res.data.categoryList);
            res.data.goods.data.map(e => {
              e.name = e.goods.name + "【" + e.spu_unit.title + "】";
              e.price = "";
            });
            this.goods_data = res.data.goods.data;
            this.totalCount_sh = res.data.goods.total;
            this.listLoading = false;
            this.monitorForm.form.uids = data.info.uids
              .split(",")
              .map((e) => parseInt(e));
            resolve();
          } else {
            this.$message.error(res.errmsg);
          }
        });
      });
    },
    bulkadd() {
      if (this.monitorForm.form.createTime.length == 0) {
        setTimeout(() => {
          this.$refs.company.focus();
        }, 100);
        return;
      }
      if (this.monitorForm.form.uids.length == 0) {
        setTimeout(() => {
          this.$refs.select.focus();
        }, 100);
        return;
      }

      this.selectArr_sh = [];
      this.shield = true;
    },
    close() {
      this.shield = false;
      this.$refs.multipleTable1.clearSelection();
    },
    bulkconfirm() {
      let list = [];
      let monitorForm_list = this.monitorForm.list;
      let selectArr_sh = this.selectArr_sh;

      for (let j = 0; j < selectArr_sh.length; j++) {
        var sel = selectArr_sh[j];
        var flag = false;
        var name = sel.name;
        for (let i = 0; i < monitorForm_list.length; i++) {
          if (monitorForm_list[i].name == name) {
            flag = true;
            break;
          }
        }
        if (!flag) {
          list.push(sel);
        }
      }

      list.map(e => {
        let obj = {};
        obj.name = e.name;
        e.goods.images.map(image => {
          obj.url = this.avatar.domain + e.path;
        });
        obj.goods_id = e.goods_id;
        obj.goods_spu_id = e.id;
        obj.category_id = "";
        obj.unit_name = e.spu_name.title;
        obj.unit = e.unit;
        obj.purchase_price = e.purchase_price;
        obj.market_price = e.market_price;
        obj.price = e.price;
        this.monitorForm.list.push(obj);
      });

      setTimeout(() => {
        this.shield = false;
      }, 200);
    },
    handleSelectionChange(val) {
      this.selectArr_sh = val;
    },
    changeLimit(pageSize) {
      this.current_sh.per_page = pageSize;
      this.cycle_getGoodsSpu();
    },
    changePage(page) {
      this.current_sh.page = page;
      this.cycle_getGoodsSpu();
    },
    reset_sh() {
      this.current_sh.page = 1;
      this.current_sh.per_page = 10;
      this.$refs["userListFrom1"].resetFields();
      this.cycle_getGoodsSpu();
    },
    search_sh() {
      this.cycle_getGoodsSpu();
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";

.mainor_form form {
  width: auto;
}
/deep/.el-form-item--small.el-form-item{
  margin-bottom: 4px;
  &.table_input{
    margin-bottom: 20px;
  }
 
}
.mg-l-30 {
  margin-left: 30px;
}
.main_name {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 5px 0;
  height: 50px;
  .main_addr {
    color: #999;
  }
  span {
    line-height: 20px;
    display: inline;
    height: 20px;
  }
}
.mainor {
  /deep/.el-button--default {
    border-color: $menuActiveText;
    color: $menuActiveText;
  }
  /deep/.el-form {
    /deep/.el-form-item--mini.el-form-item,
    /deep/.el-form-item--small.el-form-item {
      margin-bottom: 10px;
    }
  }
  .newConBox.on {
    width: calc(100% - 230px);
    padding-left: 0;
  }
  .main_crumbs_us {
    width: 240px;
  }
  .mainor_sp {
    ul {
      margin-right: 20px;
      li {
        margin-bottom: 10px;
        & > span {
          display: inline-block;
          line-height: 32px;
          width: 84px;
          color: $colour_18;
          font-size: $font_14;
          text-align: right;
          em {
            color: $colour_red;
            margin-right: 5px;
          }
        }
        .el-autocomplete {
          margin-left: 8px;
        }
        &:last-child {
          margin-left: 10px;
          .el-input {
            margin-left: 10px;
          }
        }
      }
    }
  }
  .table_container {
    /deep/.el-table--small td {
      padding-top: 0;
    }
    /deep/.el-form-item--small.el-form-item {
      margin-bottom: 20px;
      margin-top: 16px;
      margin-right: 0;
    }
  }
  .mainor_pr {
    margin-left: 10px;
    margin-bottom: 10px;
    /deep/.el-button--default {
      border-color: $subActive;
      color: $menuText;
      &:hover {
        border-color: $menuActiveText;
        color: $menuActiveText;
      }
    }
    .mainor_prr {
      font-size: $font_16;
      color: $colour_18;
      span {
        color: #fe3b3b;
        margin-left: 10px;
      }
    }
  }
  .mainor_co {
    position: fixed;
    width: 450px;
    height: 100%;
    background: $white;
    box-shadow: 0 6px 10px rgba(0, 21, 41, 0.08);
    top: 0;
    right: 0;
    z-index: 9999;
    transition: all 0.5s;
    transform: translate3d(100%, 0, 0);
    /deep/.el-button--default {
      border: 0;
    }
    &.on {
      transform: translate3d(0, 0, 0);
    }
    .mainor_cob_c {
      position: absolute;
      top: 15px;
      right: 15px;
      i {
        font-size: 22px;
        font-weight: bold;
        color: $colour_6;
      }
      &:hover {
        cursor: pointer;
      }
    }
    .mainor_cob_s {
      margin-top: 50px;
      margin-left: 10px;
      margin-right: 10px;
      p {
        font-size: $font_12;
        color: $colour_red;
        margin-top: 10px;
      }
      /deep/.el-input-group {
        width: 100%;
      }
    }
    .main_table {
      margin-left: 0;
      position: fixed;
      top: 0;
      height: calc(100% - 100px);
      width: 100%;
      margin-top: 100px;
      /deep/.el-table--small td {
        padding: 10px 0;
      }
      /deep/.el-table__body-wrapper {
        border-left: 0;
        table {
          border-left: 1px solid #ebeef5;
        }
      }
      /deep/.el-table__fixed-body-wrapper {
        border-right: 0;
        table {
          border-right: 1px solid #ebeef5;
        }
      }
      .main_table_p {
        margin-left: 10px;
        margin-right: 10px;
        height: 100%;
      }
      /deep/.el-table th .cell {
        font-size: $font_14;
      }
    }
  }
}
.bulk_box {
  flex: 1;
  text-align: right;
}
/deep/ .table_input {
  padding: 0;
  transform: translateY(5px);
  .el-form-item__error {
    padding-top: 0;
  }
}
</style>
